<template>
	<div>
		<div style="border: 1px solid">
			<h2>父组件</h2>
			<p>msg1：{{ msg1 }}</p>
			<p>msg2：{{ msg2 }}</p>
			<p>msg3：{{ msg3 }}</p>
		</div>

		<div style="border: 1px solid; margin-top: 40px">
			<h2>子组件3.4以前</h2>
			<Child1
				v-model.toLowerCase="msg1"
				v-model:msg2="msg2"
				v-model:msg3.toUpperCase="msg3"
			/>
			<br />
			<h2>子组件3.4以后</h2>
			<Child2 v-model.toLowerCase="msg1" v-model:msg2="msg2" v-model:msg3="msg3" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, ref } from 'vue'
// TODO 通过 defineAsyncComponent 加载异步配合import 函数模式便可以分包
const Child1 = defineAsyncComponent(() => import('./child1.vue'))
const Child2 = defineAsyncComponent(() => import('./child2.vue'))

const msg1 = ref('1')
const msg2 = ref('2')
const msg3 = ref('3')
</script>
